import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 在Vue中，操作原生DOM的2种方式：
//  1. $refs
//  2. 自定义指令

// 自定义指令：
// 何时用：需要操作原生的DOM时候
// 语法(2步)：
//  (1) 定义指令(全局指令): Vue.directive('指令名', 配置对象)
//  (2) 调用指令： 在标签上，通过  v-指令名 调用

// 输入框自动聚焦指令
Vue.directive('jujiao', {
  // 当指令所在的DOM元素插入到真实DOM树自动触发  1 次
  inserted (el) {
    // el：就是指令所在的DOM元素
    // console.log(el)
    el.focus()
    // el.value = 666
    // el.style.color = 'red'
  }
})


// 控制字体颜色指令
Vue.directive('color', {
  inserted (el, binding) {
    console.log('1-初始化')
    // el: 指令所在DOM元素
    // binding: 指令描述对象，里面有个重要的value属性，
    //          记录了当前指令绑定的表达式的值

    el.style.color = binding.value
  },
  // 指令绑定的数据发生变化了，每次都会执行一次
  update (el, binding) {
    console.log('2-数据变了')
    // 当数据变了，需拿到新数据，再重新赋值即可
    el.style.color = binding.value
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')









